<template>
  <div class='container'>
    <div class="contain flex">
      <div class="list">
        <!-- <el-input v-model="caremaName" placeholder="搜索列表" suffix-icon="el-icon-search" class="serach_input" size="small"></el-input> -->
        <transition name="ul" mode="out-in">
          <CustomList ref="camera" :itemList="cameraList" :current="cameraIndexCode" prefixIcon="shipinjiankong" suffixIcon="gaojingluxiangjiantou" :isAllowSetCurrent="true" :suffixInitShow="false" :diyColor="true" @onClick="cameraClick"></CustomList>
        </transition>
      </div>
      <div class="video">
        <BaseCard>
          <template #content>
            <VideoPreview :elementId="cameraIndexCode" :code="cameraIndexCode" />
          </template>
        </BaseCard>
      </div>
    </div>
    <!-- <div class="btns flex">
      <el-button @click="preCamera()" class="btn_cancel pre">上一条</el-button>
      <el-button type="primary" @click="nextCamera()" class="btn_primary next">下一条</el-button>
    </div> -->
  </div>
</template>

<script>
import VideoPreview from '@/components/VideoPreview'
import CustomList from '@/components/CustomList'
import { listDeviceCamera } from '@/api'
export default {
  name: "RealTimeMonitoring",
  props: {
    value: {
      type: Object,
      require: true
    },
  },
  data() {
    return {
      // 摄像头列表
      cameraList: [],
      // 视频列表
      videoList: [],
      // 摄像头数据
      cameraIndexCode: '',
      caremaName: ""
    };
  },
  computed: {
    hasVideo() {
      return this.videoList && this.videoList.length > 0
    },
  },
  watch: {
    value: {
      handler(details) {
        this.$nextTick(() => {
          this.getListDeviceCamera(details.deviceId, details.deptId)
        })
      },
      immediate: true,
      deep: true,
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    // 获取摄像头列表
    getListDeviceCamera(deviceId, deptId) {
      listDeviceCamera({deviceId, deptId}).then(res => {
        if (res && 200 == res.code) {
          this.cameraList = res.rows.map(item => {
            item.label = item.cameraName
            item.value = item.cameraIndexCode
            return item
          })

          if (this.cameraList.length) {
            this.cameraIndexCode = this.cameraList[0].cameraIndexCode
          }
        }
      })
    },
    cameraClick(item) {
      this.cameraIndexCode = item.cameraIndexCode
    },
    // 上一个摄像头
    preCamera() {
      this.setCurCamera(0)
    },
    // 下一个摄像头
    nextCamera() {
      this.setCurCamera(1)
    },
    // 摄像头设置当前选择
    setCurCamera(type) {
      let index = this.cameraList.findIndex(item => item.cameraIndexCode == this.cameraIndexCode)
      let nextIndex = index + (type ? 1 : -1)
      let item = this.cameraList[nextIndex]
      if (item) {
        let code = item.cameraIndexCode
        this.$refs.camera.setCurrent(code)
        this.cameraIndexCode = code
      }
    },

  },
  components: {
    VideoPreview,
    CustomList
  },
}
</script>

<style lang='less' scoped>
.container {
  height: 700px;
  position: relative;

  .contain {
    height: 100%;
    width: 100%;
  }

  .list {
    width: 250px;
    height: 100%;
    margin-right: 15px;
    color: white;
  }

  .video {
    flex: 1;
    height: 100%;
  }
}

.img-container {
  height: 100%;
}

/deep/ .nav[data-v-509784bc] {
  // height: calc(100% - 32px);
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0;
}

.btns {
  position: absolute;
  top: -45px;
  right: -26px;
  z-index: 2;
  color: white;
  width: 200px;
}
</style>